<script lang="ts" setup>
import { computed } from 'vue';
import { NEmpty, NForm, NFormItem, NInput, NTabPane, NTabs, NText } from 'naive-ui';
import type { Edge, Node } from '@vue-flow/core';
import type { Process } from '@/typings/flow/flow';

const props = defineProps<{
  selectedNode: Node | null;
  selectedEdge: Edge | null;
  flowProps: Process;
}>();

const emit = defineEmits<{
  (e: 'update-node', payload: string): void;
  (e: 'update-edge', payload: string): void;
  (e: 'update-flow', payload: Partial<Process>): void;
}>();

// Computed properties with safe data access
const name = computed({
  get: () => props.flowProps.name,
  set: value => emit('update-flow', { name: value })
});

const description = computed({
  get: () => props.flowProps.description,
  set: value => emit('update-flow', { description: value })
});

const nodeLabel = computed({
  get: () => props.selectedNode?.data.label || '',
  set: value => props.selectedNode && emit('update-node', value)
});

const nodeType = computed({
  get: () => props.selectedNode?.type ?? '',
  set: value => props.selectedNode && emit('update-node', value)
});

const edgeCondition = computed({
  get: () => props.selectedEdge?.data.condition || '',
  set: value => props.selectedEdge && emit('update-edge', value)
});
</script>

<template>
  <NTabs type="line" animated>
    <NTabPane name="flow" tab="流程属性">
      <NForm label-placement="left" label-width="auto">
        <NFormItem label="流程名称">
          <NInput v-model:value="name" />
        </NFormItem>
        <NFormItem label="流程描述">
          <NInput v-model:value="description" type="textarea" />
        </NFormItem>
      </NForm>
    </NTabPane>

    <NTabPane name="element" tab="组件属性">
      <template v-if="selectedNode">
        <NForm label-placement="left" label-width="auto">
          <NFormItem label="节点ID">
            <NText>{{ selectedNode.id }}</NText>
          </NFormItem>
          <NFormItem label="节点类型">
            <NText>{{ nodeType }}</NText>
          </NFormItem>
          <NFormItem label="节点名称">
            <NInput v-model:value="nodeLabel" />
          </NFormItem>
        </NForm>
      </template>

      <template v-else-if="selectedEdge">
        <NForm label-placement="left" label-width="auto">
          <NFormItem label="边ID">
            <NText>{{ selectedEdge.id }}</NText>
          </NFormItem>
          <NFormItem label="条件表达式">
            <NInput v-model:value="edgeCondition" />
          </NFormItem>
        </NForm>
      </template>

      <NEmpty v-else description="请选择一个元素" />
    </NTabPane>
  </NTabs>
</template>
